<template>
  <div class="collect">

    <div class="nav" v-if="collectList.length>0">
      <span v-if="!isEdit" @click="isEdit = true">管 理</span>
      <span v-else @click="onCancle">取 消</span>
    </div>
    <div class="none" v-else>
      <img src="../assets/img/empy/暂无数据.png" alt="" style="width:100%;">
      <div class="button" @click="$router.push('/')">前去商城逛逛</div>
    </div>

    <van-checkbox-group v-model="selectedList" ref="checkboxGroup">
      <div style="display:flex;flex-wrap:wrap;justify-content:space-between">
        <div v-for="(item,index) in collectList" :key="index" style="position:relative;">
          <div class="mask" v-show="isEdit"></div>
          <van-checkbox :name="item.id" @click="onChange" v-if="isEdit" style="position:absolute;top:5px;left:5px;z-index: 999;"></van-checkbox>
          <product-vue :product="item"></product-vue>
      </div>
      </div>
      
    </van-checkbox-group>

    

    <van-submit-bar v-if="isEdit" button-text="删除"  @submit="delSelected" style="z-index:999;">
      <van-checkbox v-model="checked" @click="$refs.checkboxGroup.toggleAll();" style="position:absolute;left:10px;bottom:10px;">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
import { selectAllCollectGoods,deleteSelect } from '@/request/api.js'
import ProductVue from '../components/product/Product.vue'
export default {
  components: {
    ProductVue
  },
  data() {
    return ({
      selectedList:[],
      checked:false,
      isEdit: false,
      collectList: [],
      userId: 0,
      collectGoodsIdList: []
    })
  },
  mounted() {
    this.userId = JSON.parse(localStorage.getItem('userInfo')).id
    this.getAll()
  },
  methods: {
    onChange(){
      if(this.selectedList.length==this.collectList.length) this.checked = true
      else this.checked = false
    },
    delSelected(){
      this.$dialog.confirm({
        title: '提示',
      message: '是否确认删除！',
      }).then(()=>{
        deleteSelect({userId:this.userId,ids:JSON.stringify(this.selectedList)}).then(res=>{
        this.$toast.success(res.message)
        this.isEdit = false
        this.getAll()
      })
      }).catch(()=>{
        this.onCancle()
      })
      
    },
    getAll() {
      selectAllCollectGoods({ id: this.userId }).then(res => {
        this.collectList = res.data
        if (this.collectList != null && this.collectList.length > 0) {
          this.collectList.forEach(item => {
            this.collectGoodsIdList.push(item.id)
          })
        }
        this.$store.state.collectGoodsIdList = this.collectGoodsIdList
      }).catch(res=>{
      })
    },
    onCancle() {
      this.isEdit = false

    }
  }
}
</script>

<style scoped>
  .button{
    height:40px;
    width:120px;
    background: orange;
    color: #fff;
    text-align: center;
    line-height: 40px;
    margin:0 auto;
  }
  .mask{
    position: absolute;
    top: 0;
    left: 0;
    width:100%;
    height:100%;
    background: transparent;
    z-index: 998;
  }
.collect {
  margin-top: 46px;
  padding: 5px;
}

.nav {
  position: relative;
  height: 30px;
  margin: 20px 20px 10px 0;
}

.nav span {
  display: block;
  position: absolute;
  right: 0;
  width: 100px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
  background: rgb(154, 75, 75);
  border-radius: 5px;
}
</style>